<template>
  <div class="Loginhtml">
    <el-button type="text" @click="dialogVisible = true">登录</el-button>
    <el-dialog class="dialog" :visible.sync="dialogVisible" width="80%" >
      <div class="body">
        <div class="logbox">
          <div class="title">
            <ul class="flex-c">
              <!-- <li @click="isvue = 'PLm'" :class="{active: isvue == 'PLm'}">手机登录</li> -->
              <li></li>
              <li @click="isvue = 'MLm'" :class="{active: isvue == 'MLm'}">登录</li>
              <li @click="isvue = 'rem'" :class="{active: isvue == 'rem'}">注册</li>
              <li></li>
            </ul>
          </div>
          <div class="isvue">
            <div  v-on:loginState="loginState" :is="isvue"></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import MLm from "./loginModule";
import PLm from "./phoneLoginModule";
import QCLm from "./qcModule";
import rem from "./regModule";

export default {
  data() {
    return {
      isvue: "MLm",
      dialogVisible: false,
    };
  },
  inject: ["reload"],
  methods: {
    loginState: function (n) {
      if(n){
        this.reload();
        // this.$router.go(-1)
        this.dialogVisible = !n
      }
        
    }
  },
  components: {
    MLm: MLm,
    PLm: PLm,
    QCLm: QCLm,
    rem: rem
  }
};
</script>
<style lang="scss" type="text/css" scoped>
@import "@/util/style.scss";
.Loginhtml {
  .active {
    color: $main-color12;

    // border-bootm: 3px red solid;
    border-bottom: 3px $main-color solid;
  }
  .head {
    // height: 100px;
    padding: 20px;
    background-color: white;
    span {
      position: relative;
      top: -15px;
    }
  }

  .body {
    width: 100%;
    height: 650px;
    background-image: url("https://cdn.pixabay.com/photo/2020/04/28/19/16/at-home-5106035_960_720.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    // background-color:
    .logbox {
      position: absolute;

      width: 300px;
      height: 400px;
      top: 50px;
      background-color: rgb(255, 255, 255);
      right: 50px;
      padding: 40px;

      .title {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        ul {
          width: 100%;
          li {
            line-height: 30px;
            font-weight: 700;
            cursor: pointer;
          }
        }
      }
      .isvue {
        .el-input__inner {
          // margin: 10px;
        }
      }
    }
  }
}
</style>

